<!DOCTYPE html>
<html>
	<head>
			<meta charset="utf-8">
			<title></title>
		</head>
		<style type="text/css">
			#id01{
				width: 200px;
				height: 400px;
				background-color: blueviolet;
			}
			#id02{
				width: 300px;
				height: 300px;
				background-color: #ADFF2F;
			}
			#id03{
				width: 100px;
				height: 100px;
				background-color: cadetblue;
			}
		</style>
		<body>
			
			<div id="id01" onclick="d2();"></div><br>
			<div id="id02" onclick="divClick();" onmouseenter="enterdiv();" onmouseleave="leavediv();" onmousemove="movediv();"></div><br>
			<button type="button" onclick="d1();">按钮1</button>
			<button type="button" id="but1">按钮2</button>
			<button type="button" id="but2">按钮3</button>
			<button type="button" id="but3">按钮4</button><br>
			姓名：<input type="text" name="" id="name" value="" onfocus="d3();" onblur="d4();"/><br>
			密码：<input type="text" name="" id="password" value="" onfocus="d5();" onblur="d6();"/><br>
			<button type="button" onclick="d7();">提交</button><br><br>
			<div id="id03"></div><br>
			<button type="button" id="but4" onclick="d8();">添加监听器</button>
			<button type="button" id="but5" onclick="d9();">删除监听器</button>
		</body>
		<script type="text/javascript">
		// 1.按钮和DIV的单击事件（三种绑定方式）
		
			function d2(){
				document.getElementById('id01').style.backgroundColor = 'red';
			}
			document.getElementById('id01').onclick=d2;
			document.getElementById('id01').addEventListener('click',d2);
			
			function d1(){
				console.log('点击了按钮');
			};
			document.getElementById('but1').onclick=d1;
			document.getElementById('but2').onclick=function(){
				console.log('点击了按钮3');
			};
			document.getElementById('but3').addEventListener('click',d1);
	
		// 2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式）
		
			function enterdiv(){
				console.log('鼠标进入DIV元素')
				document.getElementById('id02').style.backgroundColor = 'blue'
			}
			function leavediv(){
				console.log('鼠标离开DIV元素')
				document.getElementById('id02').style.backgroundColor = 'fuchsia'
			}
			function divClick(){
				console.log('鼠标点击了DIV元素')
			}
			function movediv(){
				console.log('鼠标移动了');
			}
		// 3.登入页面
		// 用户名输入框，
		// 密码输入框，
		// 提交按钮
			
		// 任务   3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
		//          3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
		//          3.3  密码框获取焦点事件，控制台输出：用户在输入密码
		//          3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
		//          3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
		//               密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
		function d3(){
			console.log('用户在输入名称');
		}
		function d4(){
			console.log('输入完成');
			if(document.getElementById('name').value == ''){
				alert('没有输入用户名');
			}
		}
		function d5(){
			console.log('用户在输入密码');
		}
		function d6(){
			console.log('输入完成');
			if(document.getElementById('password').value == ''){
				alert('没有输入密码');
			}
		}
		function d7(){
			var done = 'true';
			if(document.getElementById('name').value == '' && document.getElementById('password').value == ''){
				alert('用户名和密码为空');
				done = false;
			}
			if(done){
				if (document.getElementById('name').value == "") {
					alert('账号为空');
				}
				if (document.getElementById('password').value == "") {
					alert('密码为空');
				}
			}
		}
		// 4.实现DIV移动事件，采用监听器方式操作，可实现添加和清除监听器功能。	
		function d9(){
			document.getElementById('id03').removeEventListener('mousemove',movediv);
		}
		function d8(){
			document.getElementById('id03').addEventListener('mousemove',movediv);
		}
		</script>
</html>
